<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>拖动</title>
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
//通过javascript渲染指定元素为目标easyui元素
$(document).ready(function () {
  //渲染匹配元素为可拖动元素
  $("#draggable").draggable({
    //停止拖动元素时，当前元素是否回归原始位置
    revert: true,
    //拖动元素时的css指针的样式
    cursor: 'text',
    //开始拖动的句柄，值是一个样式选择器
    //handle: 'this',
    //是否禁止拖动当前元素
    disabled: false,
    //可以在其中拖动的容器的宽度，默认值为0
    edge: 50,
    //定义元素移动的轴向，可用值有：v（垂直）或h（水平），当没有设置或设置为null时可同时在水平和垂直方向上拖动
    axis: 'v',
    //被拖动的元素相对于当前光标的横坐标
    deltaX: 10,
    //被拖动的元素相对于当前光标的纵坐标
    deltaY: 10,
    /* 在拖动时使用的代理元素。当使用clone的时候，将使用该元素的一个复制元素来作为替代元素。
    如果指定了一个函数,它将返回一个jquery对象 */
    proxy: function (source) {
      var p = $('<div style="border: 1px solid #ccc; width: 250px; height: 150px;"</div>');
      p.html($(source).html()).appendTo('body');
      return p;
    }
  });
});
</script>
</head>
<body>
  <div id="draggable" style="width: 400px; height: 250px; background: gray">拖动</div>
</body>
</html>